<!-- 我的信息 -->
<template>
  <div class="about_wrapper">
    <ul class="yyxq">
      <van-cell-group>
        <van-field v-model="fieldValues.name" readonly label="姓名" placeholder="请输入姓名"></van-field>
        <van-cell title="性别" class="radioBox">
          <van-radio-group v-model="fieldValues.gender" class="radioGroup">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </van-cell>
        <van-field readonly :disabled="areaflag" clickable label="行政区划" :value="fieldValues.area" placeholder="选择区划" @click="choosequhua" />
        <van-field v-model="fieldValues.rid" label="详细地址" placeholder="请输入详细地址"></van-field>
        <van-field v-model="fieldValues.phone" label="手机号码" placeholder="请输入手机号码"></van-field>
      </van-cell-group>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker @change="onChange" show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="confirmPick" ref="picker" />
      </van-popup>
    </ul>
    <div class="xg" @click="change">修改</div>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        areaflag: false,
        UserName: "",
        show: false,
        fieldValues: {
          name: "",
          gender: "",
          rid: "", // 房屋编码
          phone: "", //手机号
          dataAreaCode: "", //区划编码
          wxId: "",
          area: ""
        },
        showPicker: false,
        columns: [{
            values: [],
            valuesorigin: [],
            className: "column1"
          },
          {
            values: [],
            valuesorigin: [],
            className: "column2"
          }
        ]
      };
    },
    //方法集合
    methods: {
      choosequhua() {
        if (!this.areaflag) {
          this.showPicker = true;
        }
      },
      PostDetail(v) {
        this.$router.push({
          path: "/myKnockOutxq"
        });
      },
      showPopup() {
        this.show = true;
      },
      confirmPick(val) {
        if (val[2]) {
          let column_index = this.columns[2].values.indexOf(val[2]);
          this.fieldValues.dataAreaCode = this.columns[2].valuesorigin[
            column_index
          ].dataAreaCode;
        } else if (val[1]) {
          let column_index = this.columns[1].values.indexOf(val[1]);
          this.fieldValues.dataAreaCode = this.columns[1].valuesorigin[
            column_index
          ].dataAreaCode;
        }
        this.fieldValues.area = val.join(",");
        this.showPicker = false;
      },
      cancelPick() {
        this.show = false;
      },
      onChange(picker, values, indexs) {
        let column_index = this.columns[indexs].values.indexOf(values[indexs]);
        if (indexs === 0) {
          var valuesorigin1 = [];
          var values1 = [];
          this.area.Committe.forEach(element => {
            if (
              element.parentId === this.columns[0].valuesorigin[column_index].id
            ) {
              valuesorigin1.push(element);
              values1.push(element.name);
            }
          });
          // console.log("area=>" + JSON.stringify(this.area));
          this.columns[1].valuesorigin = valuesorigin1;
          this.columns[1].values = values1;
          picker.setColumnValues(1, values1);
        }
      },
      // 请求获取区划数据
      rquestPostTemperature() {
        this.$toast.loading({
          message: "区划加载中...",
          forbidClick: true
        });
        this.post("region/regionTree")
          .then(res => {
            this.$toast.clear();
            this.area = res.map;
            this.analysisDataAreaCode(this.slow.authObject.dataAreaCode);
            this.area.street.forEach(element => {
              if (element.parentId === this.area.area[0].id) {
                this.columns[0].valuesorigin.push(element);
                this.columns[0].values.push(element.name);
              }
            });
            this.area.Committe.forEach(element => {
              if (element.parentId === this.columns[0].valuesorigin[0].id) {
                this.columns[1].valuesorigin.push(element);
                this.columns[1].values.push(element.name);
              }
            });
          })
          .catch(err => {
            this.$toast.clear();
            console.log("异常", err);
          });
      },
      change() {
        // if (!this.fieldValues.dataAreaCode) {
        if (!this.fieldValues.area) {
          this.$toast("请选择行政区划");
          return;
        }
        if (!this.slow.isAuth) {
        // if (!this.slow.isAuth || this.slow.userInfo.subscribe == 0) {
          this.$dialog
            .confirm({
              title: "提示",
              message: "您还没有认证，是否前去认证？"
            })
            .then(() => {
              this.$router.push("/register");
            })
            .catch(() => {});
        } else {
          if (sessionStorage.getItem("userInfo")) {
            let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
            this.fieldValues.wxId = userInfo.openId;
            this.post("publicUser/editPublicUser", {
                rid: this.fieldValues.rid, //房屋编码
                name: this.fieldValues.name, //姓名
                gender: this.fieldValues.gender, //性别
                dataAreaCode: this.fieldValues.dataAreaCode, //区域编码
                phone: this.fieldValues.phone, //手机号
                wxId: this.fieldValues.wxId,
                area: this.fieldValues.area
              })
              .then(res => {
                if (res.success == true) {
                  //this.slow.userInfo
                  if (this.slow.userInfo) {
                    if (this.slow.userInfo.sex) {
                      if (res.object.gender == "女") {
                        res.object.gender = 2;
                      } else if (res.object.gender == "男") {
                        res.object.gender = 1;
                      }
                      this.slow.userInfo.sex = res.object.gender;
                    } else if (this.fieldValues.gender) {
                      this.fieldValues.gender = res.object.gender;
                    }
                    this.slow.userInfo.nickname = res.object.name;
                    this.slow.userInfo.rid = res.object.rid;
                    this.slow.userInfo.phone = res.object.phone;
                    this.slow.userInfo.area = res.object.area;
                    this.slow.userInfo.dataAreaCode = res.object.dataAreaCode;
                    window.localStorage.setItem("userInfo", JSON.stringify(this.slow.userInfo));
                  }
                  //this.slow.authObject
                  if (this.slow.authObject) {
                    this.slow.authObject.name = this.fieldValues.name;
                    if (this.fieldValues.gender == "女") {
                      this.slow.authObject.gender = 2;
                    } else if (this.fieldValues.gender == "男") {
                      this.slow.authObject.gender = 1;
                    }
                    this.slow.authObject.phone = this.fieldValues.phone;
                    this.slow.authObject.rid = this.fieldValues.rid;
                    this.slow.authObject.dataAreaCode = this.fieldValues.dataAreaCode; //提示行政区划为空，是这里的原因
                  }
                  this.fieldValues.name = res.object.name;
                  this.fieldValues.rid = res.object.rid;
                  this.fieldValues.phone = res.object.phone;
                  this.fieldValues.dataAreaCode = res.object.dataAreaCode;
                  sessionStorage.setItem("dataAreaCode", res.object.dataAreaCode);
                  window.localStorage.setItem("dataAreaCode", res.object.dataAreaCode)
                  window.localStorage.setItem("authObject", JSON.stringify(res.object));
                  this.$toast.success(res.message || "修改成功");
                  setTimeout(() => {
                    this.$router.back();
                  }, 2000);
                } else {
                  this.$toast.fail(res.message || "修改失败");
                }
              })
              .catch(err => {
                this.$toast.fail("服务器未反应，请稍后重试");
              });
          }
        }
      },
      // 根据dataAreaCode 反推地址
      analysisDataAreaCode(areaCode) {
        let parentCode = "";
        for (let item in this.area.Committe) {
          if (areaCode === this.area.Committe[item].dataAreaCode) {
            this.fieldValues.area = "," + this.area.Committe[item].name;
            parentCode = this.area.Committe[item].parentId;
          }
        }
        if (parentCode) {
          for (let item in this.area.street) {
            if (parentCode === this.area.street[item].id) {
              this.fieldValues.area =
                this.area.street[item].name + this.fieldValues.area;
            }
          }
        }
      }
    },
    created() {
      this.rquestPostTemperature();
      this.fieldValues.dataAreaCode = this.slow.authObject.dataAreaCode; //提示行政区划为空，是这里的原因
      if (this.slow.authObject) {
        this.fieldValues.name = this.slow.authObject.userName;
        // this.fieldValues.name = this.slow.authObject.name;
        if (this.slow.authObject.gender == 2) {
          this.slow.authObject.gender = "女";
        } else if (this.slow.authObject.gender == 1) {
          this.slow.authObject.gender = "男";
        }
        this.fieldValues.gender = this.slow.authObject.gender;
        this.fieldValues.phone = this.slow.authObject.phone;
        this.fieldValues.rid = this.slow.authObject.rid;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .yyxq {
    width: 90vw;
    margin-left: 5vw;
    margin-top: 30px;
    background: rgb(247, 247, 247);
    border-radius: 10px;
    li {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      span {
        width: 20vw;
      }
      .van-cell {
        background: #f7f7f7;
        padding: 5px 10px;
      }
    }
    .van-radio-group {
      display: flex;
      div:nth-child(1) {
        margin-right: 15px;
      }
    }
    .van-cell__title {
      width: 90px;
      flex: none;
    }
  }
  .xg {
    margin-left: 10vw;
    margin-top: 30px;
    width: 80vw;
    height: 42px;
    line-height: 42px;
    background: #1989fa;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
  }
</style>